import React, { FC, useEffect, lazy } from 'react'
import { useNavigate } from 'react-router-dom'

export const Redirect: FC<{to: string}> = ({ to }) => {
  const navigate = useNavigate()
  useEffect(() => {
    navigate(to, { replace: true })
  })
  return null
}

const Example = lazy(() => import('../pages/example'))
const UnStatedExp = lazy(() => import('../pages/unstated'))

export const routes = [
  {
    index: true,
    element: <Example />,
  },
  {
    path: '*',
    element: <Redirect to="/" />,
  },
  {
    path: '/page1',
    element: <Example />,
  },
  {
    path: '/page2',
    element: <UnStatedExp />,
  },
]

